<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="admin/_fragments-blog::head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="stylesheet" href="../../static/css/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">
    <!--引入editor.md的css-->
    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css">

    <title>博客编辑</title>
</head>


<body>

<!--导航-->
<nav th:replace="admin/_fragments::menu(1)" class="ui inverted attached segment"></nav>


<!--二级导航-->
<div class="ui attached pointing menu">
    <div class="ui container">
        <div class="right menu">
            <a th:href="@{/admin/blog/save}" href="blog-input.html" class="teal active item">编辑</a>
            <a th:href="@{/admin/blog}" href="blog.html" class="item">列表</a>
        </div>
    </div>
</div>


<!--中间内容-->
<div class="m-padded-tb-big m-container">
    <div class="ui container">
        <form id="blog-form" action="#" method="post" class="ui form" th:action="@{/admin/blog}" th:object="${blog}">
            <!--隐藏域：是否发布-->
            <input type="hidden" name="published">
            <!--隐藏域：博客 ID-->
            <input type="hidden" name="id" th:value="*{id}">
            <!--标题输入栏-->
            <div class="required field">
                <div class="ui left labeled input">
                    <div class="ui selection compact teal basic dropdown label">
                        <input type="hidden" name="flag" value="原创" th:value="*{flag} == null ? '原创' : *{flag}">
                        <div class="text">原创</div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <div class="item" data-value="原创">原创</div>
                            <div class="item" data-value="转载">转载</div>
                            <div class="item" data-value="翻译">翻译</div>
                        </div>
                    </div>
                    <input type="text" name="title" placeholder="请输入标题" th:value="*{title}">
                </div>
            </div>
            <!--博客内容-->
            <div class="required field">
                <div id="md-content" style="z-index: 1!important;">
                    <textarea th:text="*{content}" placeholder="博客内容" name="content" style="display: none">
<!--/*-->
[TOC]

#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory

    editor.md/
            lib/
            css/
            scss/
            tests/
            fonts/
            images/
            plugins/
            examples/
            languages/
            editormd.js
            ...

```html
&lt;!-- English --&gt;
&lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;

&lt;!-- 繁體中文 --&gt;
&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;
```
                        <!--*/-->
                    </textarea>
                </div>
            </div>
            <!--分类和标签-->
            <div class="two fields">
                <!--分类-->
                <div class="required field">
                    <div class="ui left labeled action input">
                        <label class="ui compact teal basic label">分类</label>
                        <div class="ui fluid selection dropdown">
                            <div class="default text">单选分类</div>
                            <input type="hidden" name="type.id" th:value="*{type} != null ? *{type.id} : null">
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <div class="item" data-value="1" th:each="type : ${typeList}"
                                     th:data-value="${type.id}" th:text="${type.name}">
                                    错误日志
                                </div>
                                <!--/*-->
                                <div class="item" data-value="2">开发者手册</div>
                                <!--*/-->
                            </div>
                        </div>
                    </div>
                </div>
                <!--标签-->
                <div class="field">
                    <div class="ui left labeled action input">
                        <label class="ui compact teal basic label">标签</label>
                        <div class="ui tag fluid multiple search selection dropdown">
                            <div class="default text">多选标签</div>
                            <input type="hidden" name="tagIds" th:value="*{tagIds}">
                            <div class="menu">
                                <div class="item" data-value="1" th:each="tag : ${tagList}"
                                     th:data-value="${tag.id}" th:text="${tag.name}">
                                    java
                                </div>
                                <!--/*-->
                                <div class="item" data-value="2">JavaScript</div>
                                <!--*/-->
                            </div>
                            <i class="dropdown icon"></i>
                        </div>
                    </div>
                </div>
            </div>
            <!--首图/封面-->
            <div class="required field">
                <div class="ui left labeled input">
                    <label for="firstPicture" class="ui teal basic label">封面</label>
                    <input id="firstPicture" type="text" name="firstPicture" placeholder="封面图片地址"
                           th:value="*{firstPicture}">
                </div>
            </div>
            <!--博客描述-->
            <div class="required field">
                <textarea name="description" th:text="*{description}" placeholder="博客描述..." maxlength="140"></textarea>
            </div>
            <!--推荐、转载声明、赞赏、评论-->
            <div class="inline fields">
                <!--推荐-->
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="recommend" name="recommend" class="hidden"
                               th:checked="*{recommend}">
                        <label for="recommend">推荐</label>
                    </div>
                </div>
                <!--转载声明-->
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="shareStatement" name="shareStatement" class="hidden"
                               th:checked="*{shareStatement}">
                        <label for="shareStatement">转载声明</label>
                    </div>
                </div>
                <!--赞赏-->
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="appreciation" name="appreciation" class="hidden"
                               th:checked="*{appreciation}">
                        <label for="appreciation">赞赏</label>
                    </div>
                </div>
                <!--评论-->
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="commentable" name="commentable" class="hidden"
                               th:checked="*{commentable}">
                        <label for="commentable">评论</label>
                    </div>
                </div>
            </div>
            <!--前端校验错误提示-->
            <div class="ui error message"></div>
            <!--后端校验错误提示-->
            <!--/*/
            <div th:if="${#fields.hasErrors()}" class="ui negative message">
                <i class="close icon"></i>
                <div class="header">校验失败</div>
                <div class="ui bulleted list">
                    <div class="item" th:each="err:${#fields.errors('*')}" th:text="${err}">输入有误</div>
                </div>
            </div>
            /*/-->
            <!--返回、保存、发布按钮-->
            <div class="ui right aligned container">
                <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
                <button type="button" id="save-btn" class="ui secondary button">保存</button>
                <button type="button" id="publish-btn" class="ui teal button">发布</button>
            </div>
        </form>
    </div>
</div>


<!--/*/<th:block th:replace="admin/_fragments-blog::script">/*/-->
<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/semantic.min.js"></script>
<script src="../../static/lib/editormd/editormd.min.js"></script>

<script>
    // 初始化editor.md编辑器
    // let contentEditor;
    $(function () {
        /*contentEditor = */
        editormd("md-content", {
            width: "100%",
            height: 640,
            syncScrolling: "single",
            path: "../../static/lib/editormd/lib/"
            // 使用thymeleaf的引入方法
            // path: "/lib/editormd/lib/"
        });
    });
    // 下拉选项卡鼠标悬浮弹出
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });
</script>
<!--/*/</th:block>/*/-->

<script>
    // TODO 学习 jQuery
    $('#save-btn').on('click', function () {
        $('[name="published"]').val(false);
        $('#blog-form').submit();
    });

    $('#publish-btn').on('click', function () {
        $('[name="published"]').val(true);
        $('#blog-form').submit();
    });

    // 可以让多选框自定义选项，但是后端实现太复杂了，先不做了
    // $('.ui.tag.dropdown').dropdown({
    //     allowAdditions: true
    // });

    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'title',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客标题'
                }]
            },
            content: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '内容：请输入博客内容'
                }]
            },
            typeId: {
                identifier: 'type.id',
                rules: [{
                    type: 'empty',
                    prompt: '分类：请设置博客分类'
                }]
            },
            firstPicture: {
                identifier: 'firstPicture',
                rules: [{
                    type: 'empty',
                    prompt: '封面：请输入博客封面'
                }]
            },
            description: {
                identifier: 'description',
                rules: [{
                    type: 'empty',
                    prompt: '描述：请输入博客描述'
                }]
            }
        }
    });
</script>

</body>
</html>